<template>
  <el-dialog
    class="ba-operate-dialog"
    :close-on-click-modal="false"
    :model-value="baTable.form.operate ? true : false"
    @close="baTable.toggleForm"
  >
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']">
        查看详情
      </div>
    </template>
    <el-scrollbar
      v-loading="baTable.form.loading"
      class="ba-table-form-scrollbar"
    >
      <div
        class="ba-operate-form"
        :class="'ba-' + baTable.form.operate + '-form'"
      >
        <el-descriptions :column="2" border>
          <el-descriptions-item label="日志编号">
            {{ baTable.form.extend!.info.operId }}
          </el-descriptions-item>
          <el-descriptions-item label="操作用户">
            {{ baTable.form.extend!.info.operName }}
          </el-descriptions-item>
          <el-descriptions-item label="系统模块">
            {{ baTable.form.extend!.info.title }}
          </el-descriptions-item>
          <el-descriptions-item label="请求方式">
            {{ baTable.form.extend!.info.requestMethod }}
          </el-descriptions-item>
          <el-descriptions-item label="IP">
            {{ baTable.form.extend!.info.operIp }}
          </el-descriptions-item>
          <el-descriptions-item :width="120" :span="2" label="URL">
            {{ baTable.form.extend!.info.operUrl }}
          </el-descriptions-item>
          <el-descriptions-item :width="120" :span="2" label="操作时间">
            {{ baTable.form.extend!.info.operTime }}
          </el-descriptions-item>
          <el-descriptions-item :width="120" :span="2" label="请求参数">
            <el-tree
              class="table-el-tree"
              :data="baTable.form.extend!.info.operParam"
              :props="{ label: 'label', children: 'children' }"
            />
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </el-scrollbar>
  </el-dialog>
</template>
<script lang="ts" setup>
import type { TableRow } from "@/utils/baTable"; //表格列行类型
import { reactive, ref, inject, onMounted } from "vue";
import type baTableClass from "@/utils/baTable";
import type { ElForm, FormItemRule, FormRules } from "element-plus";
import FormItem from "@/components/formItem/index.vue";

const baTable = inject("baTable") as baTableClass;
const formRef = ref<InstanceType<typeof ElForm>>();
</script>
<style lang="scss" scoped>
.el-scrollbar {
  overflow: auto;
  position: relative;
  height: 100%;

  .el-scrollbar__wrap {
    overflow: auto;
    height: 100%;
  }
}

.table-el-tree {
  :deep(.el-tree-node) {
    white-space: unset;
  }

  :deep(.el-tree-node__content) {
    display: block;
    align-items: unset;
    height: unset;
  }
}
</style>
